<template>
<!-- 首页 -->
<view class="home_page">
	<SearchInput></SearchInput>
	<!-- 滑块 -->
	<view class="swiper_layout">
		 <swiper class="swiper" indicator-dots='true' indicator-color='#72757f' indicator-active-color='#ea4350' autoplay='true' interval='1000' circular='true'>
			<swiper-item v-for="item in swiperImg" :key="item.goods_id">
				<image mode="widthFix" :src=item.image_src></image>
			</swiper-item>
		</swiper>
	</view>
	<!-- 导航 -->
	<view class="nav">
		<!-- <navigator :open-type="item.open_type" :url="item.navigator_url" v-for="item in navImg" :key="item.name">
		<image mode="widthFix" :src=item.image_src></image>
		</navigator> -->
		<image @tap="jumpToNavPage(item.navigator_url, item.open_type)" v-for="item in navImg" :key="item.name" :src="item.image_src"></image>
	</view> 
	<!-- 时尚女装 -->
	<view class="fashion" v-for="(item,index) in columnImg" :key="index">
		<view class="fashion_title">
			<image mode="widthFix" :src="item.floor_title.image_src"></image>
		</view>
		<view class="fashion_clothing">
			<view class="fashion_clothing_left">
				<navigator :open-type="item.product_list[0].open_type" :url="item.product_list[0].navigator_url">
				<image mode="widthFix" :src="item.product_list[0].image_src"></image>
				</navigator>
			</view>
		<view class="fashion_clothing_right">
			<navigator v-for="(item,index) in item.product_list" :key="index" :open-type="item.open_type" :url="item.navigator_url">
				<image v-if="index>0" :src="item.image_src"></image>
			</navigator>
		</view>
		</view>
	</view>
	</view>
</template>
<script>
import http from '@/utils/http.js';
import SearchInput from '@/components/SearchInput';
export default {
data(){
	return{
		swiperImg:[],
		navImg:[],
		columnImg:[]
	}
},
components:{
SearchInput
},
onLoad(){
	//滑块请求
	this.swiper(),
	//导航栏请求
	this.nav()
	//时尚女装请求
	this.column()
},
 async onPullDownRefresh(){
	//滑块请求
	// this.swiper(),
	//导航栏请求
	// this.nav()
	//时尚女装请求
	// this.column()
	uni.showLoading({title:'加载数据中'})
	 await Promise.all([this.swiper(), this.nav(), this.column()]);
	uni.hideLoading();
	uni.stopPullDownRefresh();
},
methods:{
	 jumpToNavPage(url, open_type) {
		  if (open_type === 'switchTab') {
			  uni.switchTab({
			  	url
			  })
		  } else if (open_type === 'navigate') {
			  uni.navigateTo({
			  	url
			  })
		  } else {
			  uni.redirectTo({
			  	url
			  })
		  }
	  },
	// jumpToSearchPage(){
	// 	uni.navigateTo({
    // 		url:'/pages/search/index'
	// 	});
	// 	console.log('跳转');		
	// },
	//滑块请求
	async swiper(){
// 		uni.request({
//     	url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
//     	success: (res) => {
//         console.log(res.data);
//         this.swiperImg =res.data.message;
//     }
// });
//  http.get('/home/swiperdata', {}, (data) => {
// 			this.swiperImg = data;
// 		  })
this.swiperImg = await http.get('/home/swiperdata');
},
//导航栏请求
async nav(){
// 	uni.request({
//     url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/catitems',
//     success: (res) => {
// 	console.log(res.data);
// 	const data=res.data.message
// 	data.forEach(item=>{
// 		if(item.navigator_url){
// 			item.navigator_url=item.navigator_url.replace('main','index')
// 		}
// 	});
// 	this.navImg=data
//     }
// });
//  http.get('/home/catitems', {}, (data) => {
// 				data.forEach(item => {
// 					if (item.navigator_url) {
// 						item.navigator_url = item.navigator_url.replace('main', 'index');
// 					}
// 				})
// 				this.navImg = data;
// 		  })
  const data = await http.get('/home/catitems');
		  data.forEach(item => {
		  	if (item.navigator_url) {
		  		item.navigator_url = item.navigator_url.replace('main', 'index');
		  	}
		  })
		  this.navImg = data;
},
//时尚女装请求
async column(){
// 	uni.request({
//     url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/floordata',
//     success: (res) => {
// 	console.log(res.data);
// 	this.columnImg=res.data.message
//     }
// });

//  http.get('/home/floordata', {}, (data) => {
// 			 	data.forEach(item => {
// 			 		item.product_list.forEach( item => {
// 			 			if (item.navigator_url) {
// 			 				item.navigator_url = item.navigator_url.replace('goods_list', 'goods_list/index');
// 			 			}
// 			 		})
// 				 })
// 			 	this.columnImg = data;
// 		 })
const data = await http.get('/home/floordata');
		 data.forEach(item => {
		 	item.product_list.forEach( item => {
		 		if (item.navigator_url) {
		 			item.navigator_url = item.navigator_url.replace('goods_list', 'goods_list/index');
		 		}
		 	})
		 })
		 this.columnImg = data;
}

}
}
</script>

<style lang="less" scoped>
.home_page{
	// 滑块
	.swiper_layout{
		image{
			width: 750rpx;
			height: 340rpx;
		}
	}
	// 导航
	.nav{
		display: flex;
		justify-content: space-around;
		margin: 15rpx 0;
		image{
			width: 128rpx;
			height: 140rpx;
		}
	}
	// 时尚女装
	.fashion{
		margin-top: 40rpx;
		padding: 0 10rpx;
		.fashion_title{
			width: 750rpx;
			height: 59rpx;
		}
		.fashion_clothing{
			display: flex;
			.fashion_clothing_left{
				image{
					width: 232rpx;
					height: 386rpx;
				}
			}
			.fashion_clothing_right{
				display: flex;
				flex-wrap: wrap;
				flex: 1;
				image{
					width: 233rpx;
					height: 188rpx;
					padding-left: 15rpx;
				}
			}
		}
	}
}
</style>